<!-- 
    按钮组件

    单纯是一个按钮
-->
<template>
    <div class="base-component" :style="`--bg: ${ bg }; --tc: ${ tc }`">{{ text }}</div>
</template>

<script setup>
defineProps({
    text: { type: String,  default: '' },
    bg: { type: String,  default: '#2563eb' },
    tc: { type: String,  default: '#fff' },
});
</script>

<style scoped lang="less">
.base-component {
    --after-border-color: #00000000;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5vw 1vw;
    color: var(--tc);
    background-color: var(--bg);
    border-radius: 0.5vw;
    text-align: center;
    white-space: nowrap;
    position: relative;

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        padding: 0.1vw;
        border-radius: 0.55vw;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        outline: 0.1vw solid var(--after-border-color);
    }
    
    &:hover {
        --after-border-color: var(--bg);
    }
}
</style>